<template>
	<view>
		<view class="border-top position-fixed flex flex-column left-0 bottom-0 right-0 top-0">
			<view class="flex align-center px-2 bg-white  justify-between border-top"
				style="height:180rpx;width:710rpx;">
				<view class="flex-column">
					<view class="flex align-center" style="height: 90rpx;">
						<BiaofunDatetimePicker placeholder="请选择开始时间" fields="minute" @change="starPick">
						</BiaofunDatetimePicker>
					</view>
					<view class="flex align-center" style="height: 90rpx;">
						<BiaofunDatetimePicker placeholder="请选择结束时间" fields="minute" @change="endPick">
						</BiaofunDatetimePicker>
					</view>
				</view>
				<view class="flex rounded-circle bg-main colorfff align-center  justify-center px-4 font30"
					style="height: 60rpx;" @click="getPolyline">获取轨迹</view>
			</view>
			<view class="position-fixed border flex align-center justify-center"
				style="width: 300rpx;height: 100rpx;border-radius: 50rpx;top: 200rpx;z-index: 999999;background-color: #ffffff;left:30rpx;color: #666666;">
				{{num}}s后重新定位设备
			</view>
			<view class="flex-1 mapbox position-relative" id="container"></view>
			<view class="fixed-bottom mb-3 px-5 flex justify-between">
				<view class="flex rounded-circle bg-main colorfff align-center  justify-center px-4 py-1 font30"
					style="height: 60rpx;width: 200rpx;" @click="searchPoints">
					查询围栏
				</view>
				<view class="flex rounded-circle bg-main colorfff align-center  justify-center px-4 py-1 font30"
					style="height: 60rpx;width: 200rpx;" @click="createPoints">
					绘制围栏
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let timer = null;
	import maps from "../../static/maps.js"
	import BiaofunDatetimePicker from '@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue';
	export default {
		data() {
			return {
				map: null,
				startTime: '',
				endTime: '',
				latitude: '',
				longitude: '',
				markers: [], //点标记
				icon: null,
				num: 120
			}
		},
		components: {
			BiaofunDatetimePicker
		},
		onLoad() {
			timer = setInterval(() => this.changeNum(), 1000);
			this.$nextTick(() => {
				let _this = this;
				_this.map = new AMap.Map('container', {
					zoom: 15, //缩放级别
					resizeEnable: true, //自动定位
				});
				_this.icon = new AMap.Icon({
					size: new AMap.Size(30, 30),
					image: 'http://image.sxxat.cn/ic_default_head.png',
					// 图标所用图片大小
					imageSize: new AMap.Size(30, 30),
				});
				_this.getLocation();
			})
		},
		onHide() {
			if (timer !== null) {
				clearInterval(timer);
				timer = null
			}
		},
		methods: {
			changeNum() {
				this.num--;
				if (this.num == 0) {
					this.getLocation();
					this.num = 120
				}
			},
			starPick(data) {
				console.log(data)
				this.startTime = data.fmt3
			},
			endPick(data) {
				this.endTime = data.fmt3
			},
			getLocation() {
				let _this = this;
				let opts = {
					url: 'Jz/SearchZb.shtml'
				};
				let param = {
					user_id: uni.getStorageSync('classUserId'),
					userId: uni.getStorageSync('userInfo').userId,
					authToken: uni.getStorageSync('userInfo').token
				};
				_this.$http.httpRequest(opts, param).then(
					res => {
						console.log(res.data);
						if (res.data.code == '200') {
							if (res.data.latitude != '' || res.data.longitude != '') {
								let data = res.data.data;
								console.log(data);
								_this.latitude = data[0].latitude;
								_this.longitude = data[0].longitude;
								_this.map.setCenter([_this.longitude, _this.latitude]);
								let marker0 = new AMap.Marker({
									map: _this.map,
									position: [_this.longitude, _this.latitude], //位置
									icon: _this.icon, // 添加 Icon 图标 URL
									offset: new AMap.Pixel(-15, -15), //偏移量
								});
								let arr = data[0].address.split('\n');
								let content = '';
								arr.forEach((item) => {
									content += '<div class="info" style="padding: 5px;font-size:12px;">' +
										item + '</div>'
								})
								marker0.setLabel({
									offset: new AMap.Pixel(20, -15), //设置文本标注偏移量
									content: content, //设置文本标注内容
									direction: 'top' //设置文本标注方位
								});
								_this.markers[0] = marker0; //添加 起点 标记

								_this.map.add(_this.markers)
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					},
					error => {
						console.log(error);
					}
				);
			},
			getPolyline() {
				if (this.startTime != '' && this.endTime != '') {
					uni.navigateTo({
						url: 'polyline/polyline?start=' + this.startTime + '&end=' + this.endTime
					});
				}
			},
			createPoints() {
				uni.navigateTo({
					url: 'area/area'
				});
			},
			searchPoints() {
				uni.navigateTo({
					url: 'areabox/areabox'
				})
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
</style>
